<template>
  <a-drawer
    :width="340"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> 抄送人设置 </template>
    <div>
      <a-form
        auto-label-width
        ref="demandTemplateRef"
        layout="vertical"
        :model="copyerConfig"
      >
        <a-form-item
          field="tempName"
          label="选择指定成员"
          validate-trigger="input"
          required
        >
          <a-input-tag
            v-model="personTags"
            :style="{ width: '320px' }"
            placeholder="请选择"
            @click="gg()"
            @remove="removeTag($event)"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
  <a-modal v-model:visible="rorleVisible" @ok="roleOk" @cancel="roleCancel">
    <template #title> Title </template>
    <div>
      <div
        v-for="person in personList"
        :key="person.id"
        @click="roleChoise(person)"
        >{{ person.name }}</div
      >
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, watch, onMounted, reactive } from 'vue';
  import { useFlowStore } from '@/store';
  import { gainRole } from '@/api/home/System settings/roles-permissions';
  import { GetOrganizationchart } from '@/api/home/System settings/organizational-structure';

  let emits = defineEmits(['update:nodeConfig']);
  const store = useFlowStore();
  const roleValue = ref();
  const rorleVisible = ref(false);

  const gg = () => {
    rorleVisible.value = true;
  };
  const roleOk = () => {
    rorleVisible.value = false;
  };
  const roleCancel = () => {
    rorleVisible.value = false;
  };

  let copyerConfig = ref({});
  watch(
    () => store.copyerConfig1,
    (newVal, oldVal) => {
      copyerConfig.value = store.copyerConfig1;
    },
    { deep: true }
  );
  const roleTags = computed(() => {
    let tags: any = [];
    if (copyerConfig.value.value.nodeUserList?.length > 0) {
      copyerConfig.value.value.nodeUserList.forEach((element: any) => {
        tags.push(element.name);
      });
    }
    return tags;
  });
  const personTags = computed(() => {
    let tags: any = [];
    if (copyerConfig.value.value.nodeUserList?.length > 0) {
      copyerConfig.value.value.nodeUserList.forEach((element: any) => {
        tags.push(element.userStaffName);
      });
    }

    return tags;
  });
  // 删除指定成员
  const removeTag = (name: string) => {
    if (copyerConfig.value.value.nodeUserList?.length > 0) {
      copyerConfig.value.value.nodeUserList.splice(
        copyerConfig.value.value.nodeUserList.findIndex(
          (item) => item.userStaffName === name
        ),
        1
      );
    }
  };
  const closeDrawer = () => {
    store.setCopyer(false);
  };
  let visible = computed({
    get() {
      return store.copyerDrawer;
    },
    set() {
      closeDrawer();
    },
  });
  const handleOk = () => {
    store.setCopyerConfig({
      value: copyerConfig.value,
      flag: true,
      id: copyerConfig.value.id,
    });
    emits('update:nodeConfig', copyerConfig.value);
    store.setCopyer(false);
  };
  const handleCancel = () => {
    store.setCopyer(false);
  };
  const roleChoise = (role: any) => {
    let obj = {};
    obj.type = 1;
    obj.userStaffId = role.id;
    obj.userStaffName = role.name;
    copyerConfig.value.value.nodeUserList.push(obj);
  };
  // 获取角色下拉列表
  const roleList = ref([]);
  const getRoleList = async () => {
    let res = await gainRole();
    roleList.value = res;
  };
  // 获取人员列表
  const personList = ref([]);
  const getPerson = async () => {
    let res = await GetOrganizationchart();
    personList.value = res.Staff;
  };
  onMounted(() => {
    getRoleList();
    getPerson();
  });
</script>

<style lang="less" scoped>
  .item {
    padding-bottom: 16px;
    margin: 8px 0;
    border-bottom: 1px solid #eee;
  }
</style>
